<template>
  <div class="content">
    <div class="banner-list">
      <el-row >
            <el-col :span="24" :xs="0"  class="Carousel" v-if="!route.meta.navBanner">
              <el-carousel  height="720px" >
                <el-carousel-item >
                  <div class="bannerBox"><img  class="banner" src="https://stone-1315935641.cos.ap-chengdu.myqcloud.com/img%2Fbanner-1.jpg" alt=""/></div>
                </el-carousel-item>
                <el-carousel-item >
                  <div class="bannerBox"><img  class="banner" src="https://stone-1315935641.cos.ap-chengdu.myqcloud.com/img%2Fbanner-2.png" alt=""/></div>
                </el-carousel-item>
                <el-carousel-item >
                  <div class="bannerBox"><img  class="banner" src="https://stone-1315935641.cos.ap-chengdu.myqcloud.com/img%2Fbanner-3.jpg" alt=""/></div>
                </el-carousel-item>
                <el-carousel-item >
                  <div class="bannerBox"><img  class="banner" src="https://stone-1315935641.cos.ap-chengdu.myqcloud.com/img%2Fbanner-4.png" alt=""/></div>
                </el-carousel-item>
              </el-carousel>
            </el-col>

          <el-col  class="projectBc" v-if="route.meta.navBanner">
          </el-col>
        </el-row>
        <div :span="24" :xs="0" class="banner-list-text">
          <div class="text">Serein Blog</div>
          <div class="loader">
            <div>sinking...</div>
          </div>
        </div>
    </div>
        

        <div class="contentSearch" v-if="route.meta.Search">
          <el-col :span="8" :xs="12"  class="searchMoment" 
            >
              <el-input 
              v-model="input" 
              :prefix-icon="Search"
              placeholder="输入查询" 
              clearable />
              <el-button  type="warning" text @click="searchMomentHandle">搜索</el-button>
          </el-col>
        </div>
        <div v-else style="height: 76px;">
        </div>
      


        <div class="contentDisplay">
          <div class="contentMain">
            <el-col :span="13" :xs="24" class="detail"><RouterView  /></el-col>
            <el-col :span="4" :xs="0" hidden-xs-only>
              <el-col  class="stone" v-if="route.meta.navBanner">
                <Introduce />
              </el-col>
            </el-col>
          </div> 
        </div>
           
  </div>
</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import useStudyStore from '@/store/blog/study'
const studyStore = useStudyStore()
//获取当前活跃的路由
const route = useRoute()
const input = ref('')
//Search
function searchMomentHandle() {
  // console.log(input.value)
  if(input.value) {
    studyStore.searchMomentAction(input.value)
  }else {
    studyStore.getMomentListAction({offset: 0, size: 10})
    ElMessage({ message: '这是一个空的查询',type: 'warning'})
  }
}

</script>

<style scoped lang="less">


.content {
  border-top: 1px solid #eee;

  .bannerBox {

    display:flex;
    align-items:center; 
    justify-content:center;
    overflow: hidden;
    .banner {
      width:100%;
      height:auto;
      overflow: hidden;
    }
  }
  
  .projectBc {
    height: 300px;
    background: url('@/assets/img/banner-1.png') center/cover;
    // background-image: url('https://stone-1315935641.cos.ap-chengdu.myqcloud.com/img%2FnavBackground.png');
    
  }
  .contentDisplay {
    display: flex;
    justify-content: center;
  }
  .contentMain {
    width: 100%;
    display: flex;
    justify-content: center;
    .stone {
      width: 230px;
      margin-left: 15px;
      box-shadow: 0 0 6px rgba(0,0,0,.25);
      border-radius: 5px;
    }
  }
}

.contentSearch {
  display: flex;
  justify-content: center;
  .searchMoment {
    z-index: 9;
      margin: -26px auto 48px;
      width: 400px;
      display: flex;
      padding: 10px;
      border: 1px solid #fff;
      border-radius: 35px;
      background-color: #fff;
      transition: box-shadow 500ms ease;
      &:hover {
        box-shadow: 0 2px 4px rgba(230, 107, 25, 0.8);
      }
    }
}


.banner-list {
  position: relative;
  .banner-list-text {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 40%;
    width: 100%;
    text-align: center;
    .text {
      font-size: 50px;
      font-weight: bolder;
      color: #fff;
      
    }
    .loader {
        position: relative;
        /* 文字的倒影效果 */
        -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(0, 0, 0, 0.149))
    }

    .loader div {
        font-size: 25px;
        position: relative;
        color: aliceblue;
        letter-spacing: 5px;
        /* 文字动画 ，动画的步数就是字符的个数*/
        animation: typing 8s steps(10) infinite;
        /* 超出的文字隐藏 */
        overflow: hidden;
    }

    /* 光标 */
    .loader::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 2px;
        height: 100%;
        background: aliceblue;
        /* 动画 ，steps将动画分步，动画从0到100%经过3步*/
        animation: blinkCursor 0.8s steps(3) infinite;
    }

    /* 实现光标的闪烁效果 */
    @keyframes blinkCursor {

        0%,
        75% {
            opacity: 1;
        }

        76%,
        100% {
            opacity: 0;
        }
    }

    @keyframes typing 
    {
      0%,90%,100%
      {
        width: 0;
      }  
      30%,60%
      {
        width: 155px;
      }
    }
  }
}

</style>
